<template>
  <div class="container max-w-3xl mx-auto mt-40">
    <div class="h-60 mb-8">
      <div class="w-52 h-52 mx-auto mb-4">
        <vitecamp class="w-52 h-52"></vitecamp>
      </div>
    </div>
    <div class="text-center text-md">
      <h1 class="font-serif font-bold text-4xl mb-8">{{ t("hello") }} , {{ t("welcome to") }} Vitecamp</h1>
      <p class="mb-10">
        <strong>Vitecamp</strong>
        {{ t("includes features") }}
      </p>
      <p class="mb-10">
        <template v-for="(item, index) in featureList" :key="index">
          <a :href="item.href" target="_blank">{{ item.name }}</a>
          <template v-if="!item.isEnd"> |</template>
        </template>
      </p>
      <div>{{ t("before coding") }} , {{ t("setup ide") }} <strong>VSCode</strong> + <strong>Volar</strong></div>
    </div>
    <TheFooter></TheFooter>
  </div>
</template>

<script lang="ts" setup>
const { t } = useI18n();
ElMessage.success({ message: "welcome", duration: 1000 });
ElNotification({
  title: "Issue",
  message: "If you encounter problems in using the template, please raise them in the issue",
  duration: 0,
});
const featureList = [
  {
    name: "Vite3",
    href: "https://github.com/vitejs/vite",
  },
  {
    name: "Vue3",
    href: "https://github.com/vuejs/core",
  },
  {
    name: "TypeScript",
    href: "https://github.com/microsoft/TypeScript",
  },
  {
    name: "Element Plus",
    href: "https://element-plus.gitee.io/zh-CN/",
  },
  {
    name: "Vue Router 4",
    href: "https://router.vuejs.org/zh/",
  },
  {
    name: "Pinia",
    href: "https://pinia.vuejs.org/",
  },
  {
    name: "icones",
    href: "https://icones.netlify.app/",
  },
  {
    name: "Windi CSS",
    href: "https://github.com/windicss/windicss",
  },
  {
    name: "Axios",
    href: "https://axios-http.com/",
  },
  {
    name: "I18n",
    href: "https://github.com/intlify/vite-plugin-vue-i18n",
  },
  {
    name: "Prettier",
    href: "https://github.com/prettier/prettier",
  },
  {
    name: "ESLint",
    href: "https://github.com/eslint/eslint",
  },
  {
    name: "Airbnb Style",
    href: "https://github.com/airbnb/javascript",
  },
  {
    name: "Husky",
    href: "https://github.com/typicode/husky",
  },
  {
    name: "VueUse",
    href: "https://github.com/vueuse/vueuse",
  },
  {
    name: "Markdown",
    href: "https://github.com/antfu/vite-plugin-md",
  },
  {
    name: "NProgress",
    href: "https://github.com/rstacruz/nprogress",
    isEnd: true,
  },
];
</script>

<style lang="scss" scoped>
a {
  @apply text-sky-400 hover:(text-sky-600) transition-all ease-out duration-100;
}
</style>
